<template>
  <div ref="container" :style="stylesConfig"></div>
</template>

<script setup>
//如果有配置数据集,且在预览环境则渲染动态数据,否者渲染mockData;---refreshData()
//不管渲染动态数据还是静态数据,需要获取配置的options ,然后要有渲染图形的的initChart函数

import { Column } from '@antv/g2plot';
import {
  onMounted,
  onBeforeUnmount,
  ref,
  toRef,
  toRefs,
  computed,
  watch
} from 'vue';
import { getComponentShowListApi } from '@/views/design-center/api/screen';
import emitter from '@/utils/bus.js';
const props = defineProps({
  value: {
    type: Object,
    default: () => {} //所有配置项-包含,setups,styles,
  },
  preview: {
    type: Boolean,
    default: () => false //预览环境
  }
});

const container = ref(null);

const dynamicData = ref(null); //动态数据初始值

let myChart = null;
let timer = null;

const { value } = toRefs(props);

const { setups, styles } = toRefs(props.value);

const preview = toRef(props, 'preview');

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});

// 是否关联了数据集
const isConfigDataSets = computed(() => {
  return !!setups.value.associatedDatasets.id;
});

const mockData = {
  data: [
    {
      date: '2021-12-09',
      series: '单价',
      value: 16508576.36
    },
    {
      date: '2021-12-09',
      series: '折扣单价',
      value: 7248237.78
    },
    {
      date: '2021-12-10',
      series: '单价',
      value: 25035905.36
    },
    {
      date: '2021-12-10',
      series: '折扣单价',
      value: 7118531.77
    },
    {
      date: '2021-12-11',
      series: '单价',
      value: 24448186.59
    },
    {
      date: '2021-12-11',
      series: '折扣单价',
      value: 8564204.67
    },
    {
      date: '2021-12-12',
      series: '单价',
      value: 27192262.24
    },
    {
      date: '2021-12-12',
      series: '折扣单价',
      value: 10105604.74
    },
    {
      date: '2021-12-13',
      series: '单价',
      value: 21004266.53
    },
    {
      date: '2021-12-13',
      series: '折扣单价',
      value: 2174764.89
    },
    {
      date: '2021-12-14',
      series: '单价',
      value: 28334329.68
    },
    {
      date: '2021-12-14',
      series: '折扣单价',
      value: 8141962.81
    },
    {
      date: '2021-12-15',
      series: '单价',
      value: 23567274.64
    },
    {
      date: '2021-12-15',
      series: '折扣单价',
      value: 3132505.41
    },
    {
      date: '2021-12-16',
      series: '单价',
      value: 28552897.64
    },
    {
      date: '2021-12-16',
      series: '折扣单价',
      value: 10990514.43
    },
    {
      date: '2021-12-17',
      series: '单价',
      value: 29183819.56
    },
    {
      date: '2021-12-17',
      series: '折扣单价',
      value: 9401785.81
    },
    {
      date: '2021-12-19',
      series: '单价',
      value: 21608638.85
    },
    {
      date: '2021-12-19',
      series: '折扣单价',
      value: 4210388.45
    },
    {
      date: '2021-12-21',
      series: '单价',
      value: 36470606.92
    },
    {
      date: '2021-12-21',
      series: '折扣单价',
      value: 16239476.17
    },
    {
      date: '2021-12-22',
      series: '单价',
      value: 30619949.07
    },
    {
      date: '2021-12-22',
      series: '折扣单价',
      value: 6745541.62
    },
    {
      date: '2021-12-23',
      series: '单价',
      value: 19044054.07
    },
    {
      date: '2021-12-23',
      series: '折扣单价',
      value: 9241935.18
    }
  ],
  xField: 'date',
  yField: 'value',
  seriesField: 'series'
};

const getOption = () => {
  let option = null;
  let xAxisArr = setups.value.xAxis;
  let yAxisArr = setups.value.barChartValue;
  // console.log(yAxisArr, 6666);
  if (dynamicData.value) {
    option = {
      data: dynamicData.value.map((item) => {
        return {
          ...item,
          // series: '单价'
        };
      }),
      xField: xAxisArr[0].value,
      yField: yAxisArr.map((item) => item.value),
      // seriesField: 'series'
    };
  } else {
    option = mockData;
  }
  option.legend = true;
  return option;
};

let initChart = () => {
  myChart && myChart.destroy();
  myChart = new Column(container.value, {
    ...getOption()
  });

  myChart.on('plot:click', (...args) => {
    // console.log(...args);
  });

  // label 添加点击事件
  myChart.on('axis-label:click', (...args) => {
    console.log(...args, 'label:click');
  });
  myChart.on('element:click', (...args) => {
    console.log(...args, 'element:click');
    linkOtherComponent();
  });

  myChart.render();
};

/**
 * @description: 监听组件传递过来的值后,更新echart图
 * @return {*}
 */
watch(
  () => value, //监听setups,styles配置变化后更新试图
  () => {
    // initChart();
    myChart &&
      myChart.update({
        ...getOption()
      });
  },
  { deep: true }
);

/**
 * @description:获取试图的动态数据
 * @param {对象} value查询参数
 * @return {*}
 */
const getDynamicData = async (value = {}) => {
  let res = await getComponentShowListApi({
    dataSetId: setups.value?.associatedDatasets?.id
  });
  dynamicData.value = res.data;
  initChart();
  // myChart.update({
  //   ...getOption(),
  //   legend: false
  // });
};
/**
 * @description:获取服务端数据数据
 * @return {*}
 */
const refreshData = () => {
  if (isConfigDataSets.value) {
    //初始化的时候先请求一次,然后再按照定时请求请求
    getDynamicData();
    if (preview.value) {
      timer = setInterval(() => {
        getDynamicData();
      }, 50000);
    }
  } else {
    initChart();
  }
};

/**
 * @description:绑定其它组件的联动
 * @return {*}
 */
emitter.on(props.value?.id, (data) => {
  // console.log('触发了吗', data);
  getDynamicData(data);
});

const linkOtherComponent = () => {
  console.log('来了吗-------');
  let xKey = '';
  let name = ''; //获取点击的列名
  setups.value?.linkageSetting?.events?.forEach((element) => {
    element.linkageStatus &&
      emitter.emit(element.id, {
        gangedCondition: `${xKey}='${name}'` //穿透/联动查询条件
      });
  });
};

onMounted(() => {
  refreshData();
});
onBeforeUnmount(() => {
  emitter.off(props.value?.id); //关闭
  clearInterval(timer);
  timer = null;
});
</script>
<style scoped lang="scss"></style>
